<!--
 * @description: 国际化按钮
 * @Author: Islands
 * @Date: 2024-06-14 20:17:25
 * @LastEditTime: 2024-06-19 21:15:25
-->
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { SvgIcon } from "@/components/SvgIcon";
import languageJson from "../../data/language.json";
import { useI18n } from "vue-i18n";
import { configStore } from "@/plugins/pinia/index";
const { Language } = storeToRefs(configStore());
const { locale } = useI18n();
const handleCommand = (command: any) => {
  locale.value = command.value;
  Language.value = command;
};
</script>
<template>
  <el-dropdown @command="handleCommand">
    <el-button :color="`var(--ep-color-primary)`" text style="outline: none">
      <svg-icon :icon="Language.icon" />
      <span>
        {{ Language.label }}
      </span>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="item in languageJson">
          <el-dropdown-item :command="item">
            <svg-icon :icon="item.icon" />
            {{ item.label }}
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
